[scss] 리스트 타입 선언 방법과 반복문 사용하기, @each

css 전처리기 중 하나인 scss에서  리스트 타입의 선언 방법을 알아보고 리스트 타입의 데이터를 반복문에 사용하는 방법도 함께 알아봅니다.

# scss list 타입 알아보기

전처리기 css인 scss에는 여러  타입이 존재하며 배열과 같은 리스트 타입 그리고 객체와 같은 맵 타입이 존재합니다.
list - 리스트 타입(배열과 비슷)
map - 맵 타입(객체와 비슷)이 두 가지 타입은 하나가 아닌 여러 개의 값을 가질 수 있다는 공통점이 있습니다. 아래에서 리스트 타입(lists)에 대하여 자세히 알아보겠습니다.

! scss 리스트 타입(lists) 알아보기

리스트 타입은 구분자로, 콤마를 사용하여 각각의 값을 선언합니다. 아래는 변수 site에 여러 값을 선언하였습니다.

리스트 타입의 변수 선언이 완료되었습니다.

! scss 리스트 타입에 반복문 적용하기, @each

여러 개의 값을 가진 리스트에 반복문 @each를 사용하여 아래처럼 각각 다른 스타일을 적용할 수도 있습니다.

아래는 여러 개의 padding 값을 여러 개의 클래스로 적용하기 위해 작성한 코드입니다.

@ paddings.scss

이제 위 코드를 실행하면 아래와 같이 scss에서 컴파일되어 css로 나타나게 됩니다.

@ paddings.css

이처럼 @each를 사용하면 반복되는 코드를 짧게 사용하여 구현할 수 있습니다.

! 리스트 타입 nth()를 사용하여 접근

scss의 리스트 타입은 nth()를 사용하여 값을 가져올 수 있습니다. 즉 원하는 위치의 값만 가져올 수 있죠.

nth(변수명, 인덱스값)


각 순서에 맞는 값을 가져올 수 있으며 첫 번째 위치한 값을 가져오려면 1을 사용해야 합니다. 또한 마이너스 값을 인덱스로 사용하면 뒤에서 부터 값을 가져올 수 있습니다.

그럼 간단한 예제를 만들어봅니다.

설명하면 변수 $textColor는 리스트 타입의 값 4개를 가지고 있습니다. 이때 여러개의 텍스트에 다른 색을 적용하기 위해서 nth()를 사용하였습니다.

! 그 외 리스트 타입에 사용하는 함수 보기

그 외에 아래와 같은 함수들이 있습니다.

• length() // 리스트의 값의 개수를 반환함 
• set-nth(변수, 인덱스, 바꿀 값) // 원하는 위치의 리스트 값만 변경함
• index(변수, 찾을 값) // 리스트 중 일치하는 값의 인덱스를 반환

여기까지 scss의 list 타입에 대하여 알아봤습니다.